<template>
  <div class="root">
    <!-- 顶部导航 -->
    <van-nav-bar class="topNaV" @click-left="onClickLeft" v-if="current == 3">
      <template #title>
        <p class="title">分类</p>
      </template>
      <template #left>
        <van-icon name="arrow-left" color="#666666" />
        <p class="left">返回</p>
      </template>
    </van-nav-bar>
    <!-- 搜索框 -->
    <form action="/" class="search-ipt">
      <van-search
        v-model.trim="value"
        shape="round"
        show-action
        placeholder="商品搜索"
        @input="ipt"
        @cancel="onCancel"
        @search="onSearch"
      />
    </form>

    <!-- 第一部分 -->
    <div class="search" v-if="current == 1">
      <!-- 分割线 -->
      <van-divider class="br" />
      <!-- 历史搜索记录 -->
      <div class="history" v-if="isshow">
        <div class="history-title">
          <p class="title">历史记录</p>
          <img
            src="@/assets/icons/回收站.png"
            alt=""
            class="del-icon"
            @click="delHistory"
          />
        </div>
        <div class="history-list">
          <p
            v-for="item in historyList"
            :key="item.id"
            class="list-item"
            @click="goadd({ id: item.id, value: item.keyword })"
          >
            {{ item.keyword }}
          </p>
        </div>
      </div>
      <!-- 热门搜索 -->
      <div class="hot">
        <div class="hot-title">
          <p class="title">热门搜索</p>
        </div>
        <div class="hot-list">
          <p
            v-for="item in hotKeywordList"
            :key="item.id"
            :class="item.is_hot ? 'hot-act' : 'list-item'"
            @click="goadd({ id: item.id, value: item.keyword })"
          >
            {{ item.keyword }}
          </p>
        </div>
      </div>
    </div>
    <!-- 第二部分 -->

    <div class="tips" v-else-if="current == 2">
      <!-- 分割线 -->
      <van-divider class="br" />
      <!-- 搜索提示 -->
      <div
        class="tips-list"
        v-for="item in tip"
        :key="item.id"
        @click="goadd({ id: item.id, value: item.name })"
      >
        <p class="tips-title">
          <span>{{ item.name }}</span>
          <img src="@/assets/icons/向前.png" alt="" class="go-icon" />
        </p>
        <van-divider class="tip-br" />
      </div>
    </div>
    <!-- 第三部分 -->
    <div class="goodShow" v-else>
      <div class="goodShow-title">
        <div :class="index == 1 ? 'active' : ''" @click="handle(1)">
          <p>综合</p>
        </div>
        <div :class="index == 2 ? 'active' : ''" @click="handle(2)">
          <div class="cate-price">
            <div class="title-price">价格</div>
            <div class="icon-box">
              <van-icon
                class="up"
                name="arrow-up"
                :color="flag == 'up' ? '#CEA62A' : '#C1C1C1'"
              />
              <van-icon
                class="down"
                name="arrow-down"
                :color="flag == 'down' ? '#CEA62A' : '#C1C1C1'"
              />
            </div>
          </div>
        </div>
        <div :class="index == 3 ? 'active' : ''" @click="handle(3)">
          <p>分类</p>
        </div>
      </div>
      <!-- 分割线 -->
      <van-divider class="br" />
      <div class="goods">
        <div v-for="item in productList" :key="item.id" class="goods-item" @click="goodDetail(item.id)">
          <img :src="item.list_pic_url" alt="" class="goods-img" />
          <p class="goods-name">{{ item.name }}</p>
          <p class="goods-price">￥{{ item.retail_price }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { indexaction, clearhistory, helperaction, addhistory } from '@/api/home/search'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { useStore } from 'vuex'
import { showToast } from 'vant'

const current = ref(1)
const openId = useStore().state.openId
const router = useRouter()
const value = ref('')
const isshow = ref(false)
const historyList = ref([])
const hotKeywordList = ref([])
const keyword = ref('')
const tip = ref([])
const productList = ref([])
const index = ref(1)
const flag = ref('')
// 点击搜索取消按钮
const onCancel = () => router.replace('/')
// 获取 历史搜索
indexaction({ openId: openId }).then(res => {
  // console.log(res)
  historyList.value = res.historyData
  if (historyList.value[0]) {
    isshow.value = true
  } else {
    isshow.value = false
  }
  // 获取 热门搜索
  hotKeywordList.value = res.hotKeywordList
})
// 搜索框输入时
const ipt = () => {
  if (!value.value) {
    current.value = 1
  } else {
    current.value = 2
    keyword.value = value.value
    // 获取搜索提示
    helperaction({
      keyword: keyword.value,
      order: ''
    }).then((res) => {
      console.log(res)
      tip.value = res.keywords
    })
  }
}
// 搜索确定
const onSearch = () => {
  showToast('功能开发中')
}
// 删除历史记录
const delHistory = () => {
  clearhistory({ openId: openId })
  historyList.value = []
  isshow.value = false
}
console.log(openId)
// 点击搜索提示
const goadd = (obj) => {
  // 让第二层关闭,显示第三层
  current.value = 3
  // 如果历史记录里没有 添加 搜索历史
  if (!historyList.value.every((el) => el.keyword === obj.value)) {
    addhistory({
      keyword: obj.value,
      openId: openId
    })
  }
  // 展示搜索结果(即搜索提示)
  keyword.value = obj.value
  helperaction({ keyword: keyword.value }).then((res) => {
    productList.value = res.keywords
  })
}
// 点击 分类 价格 排序
const handle = (num) => {
  index.value = num
  const obj = { keyword: keyword.value }
  if (num === 2) {
    if (!flag.value) {
      flag.value = 'up'
      obj.order = 'desc'
    } else {
      if (flag.value === 'down') {
        flag.value = 'up'
        obj.order = 'desc'
      } else {
        flag.value = 'down'
        obj.order = 'asc'
      }
    }
  } else {
    flag.value = ''
  }
  //   获取 商品 列表
  helperaction(obj).then(res => {
    productList.value = res.keywords
  })
}
// 点击顶部导航取消
const onClickLeft = () => {
  // if (router) {
  //   // router.back()
  // } else {
  //   addhistory()
  //   detailaction()
  // }
  current.value = 1
}
// 点击去商品详情页
const goodDetail = id => {
  console.log(id)
}
</script>

<script>
export default {
  name: 'homeSearch'
}
</script>

<style lang="scss" scoped>
.search-ipt {
  margin: 8px 20px 41px;
  overflow:hidden ;
}
.br {
  color: "#E8E8E8";
  margin: 0;
  padding: 0;
}
.sesarch {
  //搜索框样式
  .br {
    color: "#E8E8E8";
    margin: 0;
    padding: 0;
  }
}
.history {
  overflow: hidden;
  margin-bottom: 20px;
  .history-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 39px;
    margin-top: 42px;
    .title {
      font-size: 26px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 500;
      height: 37px;
      line-height: 37px;
      margin: 0;
      padding: 0;
    }
    .del-icon {
      display: block;
      width: 20px;
      height: 20px;
    }
  }
  .history-list {
    width: 672px;
    margin: 28px auto 35px;
    overflow: hidden;
    .list-item {
      float: left;
      border: 1px solid #e2e2e2;
      padding: 12px 19px 10px 23px;
      font-size: 20px;
      color: #666666;
      letter-spacing: 0;
      font-weight: 400;
      height: 50px;
      line-height: 50px;
      margin: 0 10px 12px 0;
    }
  }
}
//热门搜索
.hot {
  overflow: hidden;
  .hot-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 39px;
    margin-top: 42px;
    .title {
      font-size: 26px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 500;
      height: 37px;
      line-height: 37px;
      margin: 0;
      padding: 0;
    }
  }
  .hot-list {
    width: 672px;
    margin: 28px auto 0;
    .list-item {
      float: left;
      border: 1px solid #e2e2e2;
      padding: 12px 19px 10px 23px;
      font-size: 20px;
      color: #666666;
      letter-spacing: 0;
      font-weight: 400;
      height: 50px;
      line-height: 50px;
      margin: 0 10px 12px 0;
    }
    .hot-act {
      float: left;
      border: 1px solid #e2e2e2;
      padding: 12px 19px 10px 23px;
      font-size: 20px;
      letter-spacing: 0;
      font-weight: 400;
      height: 50px;
      line-height: 50px;
      margin: 0 10px 12px 0;
      color: #9f0606;
    }
  }
}
.tips {
  overflow: hidden;
}
.tips-list {
  overflow: hidden;
}
.tips-title {
  margin: 0;
  margin-left: 52px;
  height: 93px;
  font-size: 26px;
  color: #333333;
  letter-spacing: 0;
  font-weight: 400;
  line-height: 93px;
  padding: 0;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.go-icon {
  margin-right: 52px;
  width: 26px;
  height: 26px;
}
.tip-br {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.goods-name{
  padding-left: 20px;
}
.goods-price{
  padding-left: 20px;
  color: red;
}
.goodShow {
  //display: flex;
  //justify-content: space-evenly;
  //align-items: center;
  .goodShow-title {

    .active {
      p {
        color: #cea62a;
      }
      .cate-price {

        .title-price {
          color: #cea62a;
        }
      }
    }
    width: 710px;
    height: 40px;
    margin: 0 auto 18px;
    display: flex;
    justify-content: space-evenly;
    div {
      width: 235px;
      height: 40px;
      font-size: 28px;
      color: #212121;
      letter-spacing: 0;
      font-weight: 400;
      height: 40px;
      line-height: 40px;
      text-align: center;
      p {
        font-size: 28px;
        color: #212121;
        letter-spacing: 0;
        font-weight: 400;
        height: 40px;
        line-height: 40px;
        padding: 0;
        margin: 0;
      }

      .cate-price {
        width: 87px;
        height: 40px;
        margin: 0 auto;
        display: flex;
        line-height: 40px;
        .title-price {
          width: 56px;
          font-size: 28px;
          color: #212121;
          letter-spacing: 0;
          font-weight: 400;
          height: 40px;
          line-height: 40px;
        }
        .icon-box {
          width: 29px;
          height: 40px;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-content: center;
          .up {
            width: 29px;
            height: 20px;
          }
          .down {
            width: 29px;
            height: 20px;
          }
        }
      }
    }
  }
}

.goods {
  //display: flex;
  width: 710px;
  margin: 0 auto;
  overflow: hidden;
}
.goods-item {
  //display: flex;
  width: 350px;
  float: left;
}
.goods-img {
  width: 350px;
  height: 339px;
}
.topNav {

      .left {
        font-size: 31.2px;
        color: #666666;
        letter-spacing: 0;
        font-weight: 400;
      }

      .title {
        font-size: 36px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
      }

  }
</style>
